import { Layout, Button, Space, message, Drawer, Input, Modal, Select } from 'myselfantd';
import React, { useState, useRef, useMemo, useCallback } from 'react';
import type { ColumnsType, TableProps } from 'antd/es/table';
import { getMachinePage, getImplementsSpupInfos, delMachine } from '../api';
import Base from './Base';
import Content from './Content';
// import { getOrganizition, getModel, getType } from '@/services/api/EquipmentManage';

interface DataType {
  code: number;
  work: string;
  operateArea: number;
  operateDistance: number;
  taskEndTime: string;
  taskStatus: number;
  evaluationState: number;
  option: [];
}
const App: React.FC = () => {
  const ref = useRef<any>();
  const handleContinue = async (_: any, state: string) => {
    setCurState([true, state, _.id]);
  };
  const [curState, setCurState] = useState([false, 'view', ''] as [boolean, string, string]);
  const handleAdd = () => {
    setCurState([true, 'create', '']);
  };
  return (
    <>
      <Layout.PageTemplate
        pageRef={ref}
        title="农机管理"
        search={useMemo(
          () => ({
            template: [
              {
                name: 'categoryCode',
                render: () => (
                  <Select
                    fieldNames={{ name: 'categoryName', value: 'categoryId' }}
                    // request={async () => {
                    //   let { result } = await getType();
                    //   return result;
                    // }}
                    placeholder="请选择农机类型"
                    allowClear
                  />
                ),
              },
              {
                name: 'equipmentModel',
                render: () => (
                  <Select
                    fieldNames={{ name: 'name', value: 'id' }}
                    // request={async () => {
                    //   let { result } = await getModel();
                    //   return result.map((item: any) => ({ name: item, id: item }));
                    // }}
                    placeholder="规格型号"
                    allowClear
                  />
                ),
              },
              // {
              //   name: 'belongCompany',
              //   render: () => (
              //     <Select
              //       fieldNames={{ name: 'companyName', value: 'companyCode' }}
              //       request={async () => {
              //         let { result } = await getOrganizition();
              //         return result;
              //       }}
              //       placeholder="所属单位"
              //       allowClear
              //     />
              //   ),
              // },
              {
                name: 'conditions',
                render: () => <Input placeholder="请输入农机编号/车架号"  showCount={false}/>,
              },
            ],
            button: [
              <Button.Image type="primary" icon={'add'} onClick={handleAdd}>
                添加农机
              </Button.Image>,
            ],
          }),
          [],
        )}
        table={useMemo(
          () => ({
            template: [
              {
                title: '序号',
                width: 100,
                fixed: 'left',
                align: 'left',
                render: (text, record, index) => {
                  return index + 1;
                },
              },
              {
                title: '农机编号',
                width: 150,
                textWrap: 'word-break',
                align: 'left',
                dataIndex: 'code',
              },
              {
                title: '车架号',
                width: 150,
                textWrap: 'word-break',
                align: 'left',
                dataIndex: 'vin',
              },
              {
                title: '农机名称',
                width: 120,
                textWrap: 'word-break',
                ellipsis: true,
                align: 'left',
                dataIndex: 'name',
              },
              {
                title: '农机类型',
                width: 100,
                dataIndex: 'categoryName',
              },
              {
                title: '设备厂商',
                width: 100,
                textWrap: 'word-break',
                align: 'left',
                dataIndex: 'producer',
              },
              {
                title: '农机型号',
                width: 100,
                textWrap: 'word-break',
                align: 'left',
                dataIndex: 'equipmentModel',
              },
              // {
              //   title: '所属单位',
              //   width: 100,
              //   textWrap: 'word-break',
              //   align: 'left',
              //   dataIndex: 'widthOfCloth',
              // },
              {
                title: '绑定终端',
                width: 100,
                textWrap: 'word-break',
                align: 'left',
                dataIndex: 'terminalCode',
                render: (text: any, record: { terminalCode: any }) => (
                  <div style={{ display: 'inline-flex', width: '100%' }}>
                    <span style={{ paddingRight: 12 }}>
                      {!record?.terminalCode ? '未绑定' : text}
                    </span>
                    <img
                      src={''}
                      style={{ width: 20, height: 15, cursor: 'pointer', marginTop: 4 }}
                      alt=""
                      onClick={() => {
                        // setVisibleBind(true);
                        // BindRef.current = record;
                      }}
                    />
                  </div>
                ),
              },
              {
                title: '所属系统',
                width: 100,
                textWrap: 'word-break',
                align: 'left',
                dataIndex: 'belongingSystem',
                render: (_: any) => {
                  enum TYPE {
                    baseinfo = '设备管理系统',
                    mmc = '一控多机',
                    telematics = '车联网',
                  }
                  return TYPE[_];
                },
              },
              {
                title: '操作',
                width: 240,
                render: (_, record) => (
                  <Space size="middle">
                    <Button type="link" block onClick={() => handleContinue(_, 'view')}>
                      查看
                    </Button>
                    <Button
                      type="link"
                      block
                      onClick={() => {
                        Modal.confirm({
                          content: `是否确认删除【${_.name}】的数据信息？`,
                          onOk() {
                            delMachine(_.id).then((res: any) => {
                              ref.current?.handleSearch();
                              message.success('删除成功');
                            });
                          },
                          onCancel() {
                            Modal.destroyAll();
                          },
                        });
                      }}
                    >
                      删除
                    </Button>
                  </Space>
                ),
              },
            ] as ColumnsType<DataType>,
            // data: {
            //   data: [] as ColumnsType<DataType>,
            //   page: { total: 0, pageSize: 20, current: 1 },
            // },
          }),
          [],
        )}
        // request={useCallback(async (page: any, params: any) => {
        //   let defaultParams: any = {
        //     pageIndex: page.current,
        //     pageSize: page.pageSize,
        //   };
        //   let {
        //     result: { data, pageIndex, pageSize: newPageSize, total },
        //   } = await getMachinePage({ ...defaultParams, ...params });
        //   return {
        //     data,
        //     page: { total, pageSize: newPageSize, current: pageIndex },
        //   };
        // }, [])}
      />
      {curState[1].includes('create') && (
        <Modal.Dialog
          title="新增农机"
          showDialog={curState[0]}
          changeDialog={(val: boolean) => {
            setCurState([val, 'create', '']);
          }}
        >
          <Base
            close={() => {
              setCurState([false, 'create', '']);
              ref.current?.handleSearch();
            }}
          />
        </Modal.Dialog>
      )}
      {curState[1].includes('view') && (
        <Drawer
          title="查看农机"
          placement="right"
          onClose={() => {
            setCurState([false, 'edit', '']);
          }}
          visible={curState[0]}
          viewmode={'view'}
          width={'80%'}
          padding={0}
        >
          <Content
            id={curState[2]}
            onFinish={() => {
              setCurState([false, '', '']);
              ref.current?.handleSearch();
            }}
          />
        </Drawer>
      )}
    </>
  );
};

export default App;
